Tworzenie Rozszerzeń Przeglądarki: Nawigacja po Manifeście V3 i API JavaScript

Rozszerzenia przeglądarki oferują potężny sposób na ulepszenie i dostosowanie przeglądania. Umożliwiają one programistom dodawanie funkcjonalności do przeglądarek internetowych, interakcję ze stronami internetowymi i integrację z usługami internetowymi. Ten przewodnik zawiera kompleksowy przegląd tworzenia rozszerzeń przeglądarki, koncentrując się na Manifeście V3 i podstawowych interfejsach API JavaScript, które napędzają te rozszerzenia.

Zrozumienie rozszerzeń przeglądarki

Rozszerzenie przeglądarki to mały program, który rozszerza funkcjonalność przeglądarki internetowej. Rozszerzenia mogą modyfikować strony internetowe, dodawać nowe funkcje i integrować się z zewnętrznymi usługami. Są one zazwyczaj pisane w JavaScript, HTML i CSS, i zapakowane jako plik ZIP z plikiem manifestu, który opisuje metadane i uprawnienia rozszerzenia.

Popularne przypadki użycia rozszerzeń przeglądarki obejmują:

• Blokery reklam: Usuwanie reklam ze stron internetowych.
• Menedżery haseł: Bezpieczne przechowywanie i zarządzanie hasłami.
• Narzędzia zwiększające produktywność: Ulepszanie przepływu pracy za pomocą funkcji takich jak zarządzanie zadaniami i robienie notatek.
• Dostosowywanie treści: Modyfikowanie wyglądu i zachowania stron internetowych.
• Narzędzia ułatwień dostępu: Poprawianie dostępności stron internetowych dla osób z niepełnosprawnościami.

Manifest V3: Nowy standard

Manifest V3 to najnowsza wersja pliku manifestu rozszerzenia przeglądarki, pliku JSON, który opisuje metadane, uprawnienia i zasoby rozszerzenia. Wprowadza on znaczące zmiany w procesie tworzenia rozszerzeń, koncentrując się przede wszystkim na poprawie bezpieczeństwa, prywatności i wydajności. Kluczowe zmiany w Manifeście V3 obejmują:

• Service Workers: Zastąpienie stron tła service workerami w celu poprawy wydajności i zmniejszenia zużycia pamięci. Service workery to skrypty oparte na zdarzeniach, które działają w tle i obsługują zdarzenia takie jak żądania sieciowe i alarmy.
• Deklaratywny API żądań sieciowych: Zastąpienie blokującego interfejsu API webRequest deklaratywnym interfejsem API żądań sieciowych w celu filtrowania żądań sieciowych. Zwiększa to prywatność i bezpieczeństwo poprzez ograniczenie dostępu rozszerzenia do ruchu sieciowego.
• Zasady bezpieczeństwa zawartości (CSP): Egzekwowanie bardziej rygorystycznych zasad CSP w celu zapobiegania wykonywaniu dowolnego kodu i łagodzenia zagrożeń bezpieczeństwa.
• Wersja manifestu: Klucz manifest_version w pliku manifest.json musi być ustawiony na 3.

Migracja z Manifestu V2 do Manifestu V3

Migracja z Manifestu V2 do Manifestu V3 wymaga starannego planowania i modyfikacji kodu. Oto przewodnik krok po kroku:

1. Zaktualizuj plik manifestu: Ustaw manifest_version na 3 i zaktualizuj pola permissions i background, aby były zgodne z wymaganiami Manifestu V3.
2. Zastąp strony tła service workerami: Przepisz skrypty tła jako service workery, obsługując zdarzenia za pomocą interfejsów API chrome.scripting i chrome.alarms.
3. Migruj do deklaratywnego API żądań sieciowych: Zastąp blokujące wywołania API webRequest deklaratywnymi regułami zdefiniowanymi w interfejsie API declarativeNetRequest.
4. Zaktualizuj zasady bezpieczeństwa zawartości: Dostosuj pole content_security_policy w pliku manifestu, aby było zgodne z bardziej rygorystycznymi wymaganiami CSP.
5. Dokładnie przetestuj: Przetestuj rozszerzenie w różnych przeglądarkach, aby zapewnić kompatybilność i prawidłowe działanie.

Przykład: Migracja skryptu tła do Service Workera

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Podstawowe interfejsy API JavaScript dla rozszerzeń przeglądarki

Rozszerzenia przeglądarki opierają się na zestawie interfejsów API JavaScript, aby wchodzić w interakcje z przeglądarką i stronami internetowymi. Oto niektóre z najważniejszych interfejsów API:

1. chrome.runtime

Interfejs API chrome.runtime zapewnia dostęp do środowiska wykonawczego rozszerzenia. Umożliwia on rozszerzeniom komunikację ze skryptem tła, dostęp do pliku manifestu i zarządzanie cyklem życia rozszerzenia.

Kluczowe metody:

• chrome.runtime.sendMessage(): Wysyła wiadomość do skryptu tła lub innych rozszerzeń.
• chrome.runtime.onMessage.addListener(): Nasłuchuje wiadomości z innych skryptów.
• chrome.runtime.getManifest(): Zwraca plik manifestu rozszerzenia jako obiekt JavaScript.
• chrome.runtime.reload(): Ponownie ładuje rozszerzenie.

Przykład: Wysyłanie wiadomości ze skryptu zawartości do skryptu tła

Skrypt zawartości (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Skrypt tła (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

Interfejs API chrome.storage zapewnia mechanizm przechowywania i pobierania danych w rozszerzeniu. Oferuje on zarówno lokalne, jak i zsynchronizowane opcje przechowywania.

Kluczowe metody:

• chrome.storage.local.set(): Przechowuje dane lokalnie.
• chrome.storage.local.get(): Pobiera dane z pamięci lokalnej.
• chrome.storage.sync.set(): Przechowuje dane, które są synchronizowane na wszystkich urządzeniach użytkownika.
• chrome.storage.sync.get(): Pobiera dane z zsynchronizowanej pamięci.

Przykład: Przechowywanie i pobieranie danych w pamięci lokalnej

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

Interfejs API chrome.tabs umożliwia rozszerzeniom interakcję z kartami przeglądarki. Udostępnia on metody tworzenia, wykonywania zapytań, modyfikowania i zamykania kart.

Kluczowe metody:

• chrome.tabs.create(): Tworzy nową kartę.
• chrome.tabs.query(): Wykonuje zapytania o karty, które pasują do określonych kryteriów.
• chrome.tabs.update(): Aktualizuje właściwości karty.
• chrome.tabs.remove(): Zamyka kartę.
• chrome.tabs.executeScript(): Wykonuje kod JavaScript w karcie.

Przykład: Tworzenie nowej karty

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

Interfejs API chrome.alarms umożliwia rozszerzeniom planowanie zadań, które mają być wykonywane o określonej godzinie lub po określonym interwale. Jest to szczególnie ważne w Manifeście V3, ponieważ zastępuje użycie timerów w stronach tła, które nie są już obsługiwane.

Kluczowe metody:

• chrome.alarms.create(): Tworzy nowy alarm.
• chrome.alarms.get(): Pobiera istniejący alarm.
• chrome.alarms.clear(): Czyści alarm.
• chrome.alarms.getAll(): Pobiera wszystkie alarmy.
• chrome.alarms.onAlarm.addListener(): Nasłuchuje zdarzeń alarmu.

Przykład: Tworzenie alarmu

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

Interfejs API chrome.scripting umożliwia rozszerzeniom wstrzykiwanie kodu JavaScript i CSS do stron internetowych. Ten interfejs API jest kluczowym składnikiem Manifestu V3 i jest używany przez service workery do interakcji ze stronami internetowymi po ich załadowaniu.

Kluczowe metody:

• chrome.scripting.executeScript(): Wykonuje kod JavaScript w karcie lub ramce.
• chrome.scripting.insertCSS(): Wstawia kod CSS do karty lub ramki.

Przykład: Wstrzykiwanie kodu JavaScript do karty

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

Interfejs API chrome.notifications umożliwia rozszerzeniom wyświetlanie powiadomień użytkownikowi. Jest to przydatne do dostarczania aktualizacji, alertów i innych ważnych informacji.

Kluczowe metody:

• chrome.notifications.create(): Tworzy nowe powiadomienie.
• chrome.notifications.update(): Aktualizuje istniejące powiadomienie.
• chrome.notifications.clear(): Czyści powiadomienie.
• chrome.notifications.getAll(): Pobiera wszystkie powiadomienia.

Przykład: Tworzenie powiadomienia

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

Interfejs API chrome.contextMenus umożliwia rozszerzeniom dodawanie elementów do menu kontekstowego przeglądarki (menu po kliknięciu prawym przyciskiem myszy). Zapewnia to wygodny sposób dla użytkowników na dostęp do funkcjonalności rozszerzenia bezpośrednio ze stron internetowych.

Kluczowe metody:

• chrome.contextMenus.create(): Tworzy nowy element menu kontekstowego.
• chrome.contextMenus.update(): Aktualizuje istniejący element menu kontekstowego.
• chrome.contextMenus.remove(): Usuwa element menu kontekstowego.
• chrome.contextMenus.removeAll(): Usuwa wszystkie elementy menu kontekstowego utworzone przez rozszerzenie.

Przykład: Tworzenie elementu menu kontekstowego

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

Interfejs API chrome.i18n służy do internacjonalizacji rozszerzenia, dzięki czemu jest ono dostępne dla użytkowników w różnych językach i regionach. Umożliwia on udostępnianie zlokalizowanych wersji interfejsu użytkownika i wiadomości rozszerzenia.

Kluczowe metody:

• chrome.i18n.getMessage(): Pobiera zlokalizowany ciąg znaków z katalogu _locales rozszerzenia.

Przykład: Używanie chrome.i18n do lokalizacji

Najpierw utwórz katalog _locales w folderze głównym rozszerzenia. Wewnątrz utwórz foldery specyficzne dla języka, takie jak en, es, fr itd.

W każdym folderze językowym utwórz plik messages.json. Na przykład w _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Następnie w kodzie JavaScript:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Zgodność z różnymi przeglądarkami

Chociaż Chrome jest najpopularniejszą przeglądarką do tworzenia rozszerzeń, ważne jest, aby wziąć pod uwagę kompatybilność z różnymi przeglądarkami. Firefox, Safari i inne przeglądarki również obsługują rozszerzenia, ale ich interfejsy API i formaty manifestów mogą się nieznacznie różnić.

Aby zapewnić zgodność z różnymi przeglądarkami:

• Używaj interfejsu API WebExtensions: Interfejs API WebExtensions to standaryzowany interfejs API do tworzenia rozszerzeń przeglądarki, który jest obsługiwany przez wiele przeglądarek.
• Testuj w różnych przeglądarkach: Przetestuj swoje rozszerzenie w różnych przeglądarkach, aby zidentyfikować i naprawić problemy ze zgodnością.
• Używaj polyfilli: Używaj polyfilli, aby zapewnić brakującą funkcjonalność API w różnych przeglądarkach.
• Kod warunkowy: Używaj kodu warunkowego, aby dostosować się do różnic specyficznych dla przeglądarki. Na przykład: if (typeof browser === "undefined") { var browser = chrome; }

Najlepsze praktyki dotyczące tworzenia rozszerzeń przeglądarki

Oto kilka najlepszych praktyk, których należy przestrzegać podczas tworzenia rozszerzeń przeglądarki:

• Minimalizuj uprawnienia: Proś tylko o uprawnienia, których Twoje rozszerzenie absolutnie potrzebuje. Zwiększa to prywatność i bezpieczeństwo użytkownika.
• Używaj bezpiecznych praktyk kodowania: Przestrzegaj bezpiecznych praktyk kodowania, aby zapobiec lukom w zabezpieczeniach, takich jak skrypty w wielu witrynach (XSS) i wstrzykiwanie kodu.
• Optymalizuj wydajność: Zoptymalizuj wydajność swojego rozszerzenia, aby zminimalizować jego wpływ na wydajność przeglądarki.
• Udostępnij jasną i zwięzłą dokumentację: Udostępnij jasną i zwięzłą dokumentację, aby pomóc użytkownikom zrozumieć, jak korzystać z rozszerzenia.
• Obsługuj błędy w sposób elegancki: Zaimplementuj obsługę błędów, aby zapobiec awarii rozszerzenia lub powodowaniu nieoczekiwanego zachowania.
• Utrzymuj swoje rozszerzenie w aktualnym stanie: Regularnie aktualizuj swoje rozszerzenie, aby rozwiązywać błędy, luki w zabezpieczeniach i problemy ze zgodnością.
• Rozważ internacjonalizację (i18n): Zaprojektuj swoje rozszerzenie tak, aby można je było łatwo zlokalizować w różnych językach. Używaj interfejsu API chrome.i18n.
• Szanuj prywatność użytkownika: Bądź transparentny co do tego, w jaki sposób rozszerzenie zbiera i wykorzystuje dane użytkownika, i uzyskaj zgodę użytkownika, gdy jest to konieczne. Przestrzegaj odpowiednich przepisów dotyczących prywatności, takich jak RODO i CCPA.

Przesyłanie rozszerzenia do sklepów

Po opracowaniu i przetestowaniu rozszerzenia, będziesz chciał przesłać je do sklepów z rozszerzeniami przeglądarki, aby udostępnić je użytkownikom. Każda przeglądarka ma własny sklep i proces przesyłania:

• Chrome Web Store: Prześlij swoje rozszerzenie do Chrome Web Store dla użytkowników Chrome. Proces ten obejmuje utworzenie konta programisty, spakowanie rozszerzenia i przesłanie go do sklepu.
• Firefox Add-ons: Prześlij swoje rozszerzenie do Firefox Add-ons dla użytkowników Firefox. Proces jest podobny do Chrome Web Store i obejmuje utworzenie konta programisty i przesłanie rozszerzenia do weryfikacji.
• Safari Extensions Gallery: Prześlij swoje rozszerzenie do Safari Extensions Gallery dla użytkowników Safari. Proces ten obejmuje uzyskanie certyfikatu programisty od firmy Apple i przesłanie rozszerzenia do weryfikacji.

Przesyłając rozszerzenie, upewnij się, że podajesz dokładne i kompletne informacje, w tym opisowy tytuł, szczegółowy opis, zrzuty ekranu i politykę prywatności. Sklepy z rozszerzeniami sprawdzają przesłane zgłoszenia, aby upewnić się, że są zgodne z ich zasadami i wytycznymi.

Wnioski

Tworzenie rozszerzeń przeglądarki z Manifestem V3 i interfejsami API JavaScript oferuje potężny sposób na dostosowanie i ulepszenie przeglądania. Rozumiejąc podstawowe pojęcia, przestrzegając najlepszych praktyk i uwzględniając zgodność z różnymi przeglądarkami, programiści mogą tworzyć cenne i angażujące rozszerzenia dla użytkowników na całym świecie. Wraz z ewolucją sieci rozszerzenia przeglądarki będą nadal odgrywać istotną rolę w kształtowaniu przyszłości Internetu.

Pamiętaj, aby zawsze dawać priorytet prywatności i bezpieczeństwu użytkowników podczas tworzenia rozszerzeń. Tworząc z myślą o tych zasadach, możesz tworzyć rozszerzenia, które są zarówno użyteczne, jak i godne zaufania.

Ten przewodnik stanowi solidną podstawę do rozpoczęcia tworzenia rozszerzeń przeglądarki. Zagłębiając się głębiej, poznaj różne interfejsy API i funkcje oraz eksperymentuj z różnymi technikami, aby tworzyć innowacyjne i wpływowe rozszerzenia.